WebGLShader

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Der WebGLShader ist Teil der WebGL-API und kann entweder ein Vertex- oder ein Fragment-Shader sein. Ein WebGLProgram erfordert beide Shader-Typen.

Beschreibung

Um einen WebGLShader zu erstellen, verwenden Sie WebGLRenderingContext.createShader, dann binden Sie den GLSL-Quellcode mit WebGLRenderingContext.shaderSource() an, und rufen Sie schließlich WebGLRenderingContext.compileShader() auf, um den Shader zu vervollständigen und zu kompilieren. Zu diesem Zeitpunkt befindet sich der WebGLShader noch nicht in einer verwendbaren Form und muss noch an ein WebGLProgram angehängt werden.

function createShader(gl, sourceCode, type) {
  // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
  const shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    const info = gl.getShaderInfoLog(shader);
    throw new Error(`Could not compile WebGL program. \n\n${info}`);
  }
  return shader;
}

Weitere Informationen zum Anhängen der Shader finden Sie unter WebGLProgram.

Beispiele

Erstellen eines Vertex-Shaders

Beachten Sie, dass es viele andere Strategien zum Schreiben und Zugreifen auf Shader-Quellcodes gibt. Diese Beispiele dienen nur zu Illustrationszwecken.

const vertexShaderSource =
  "attribute vec4 position;\n" +
  "void main() {\n" +
  "  gl_Position = position;\n" +
  "}\n";

// Use the createShader function from the example above
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);

Erstellen eines Fragment-Shaders

const fragmentShaderSource = `void main() {
  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;

// Use the createShader function from the example above
const fragmentShader = createShader(
  gl,
  fragmentShaderSource,
  gl.FRAGMENT_SHADER,
);

Spezifikationen

Specification
WebGL Specification # 5.8